<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@include file="/WEB-INF/layouts/taglib.jsp"%>

<script src="${ctx}/static/commonjs/crud.js"></script>

<script>
    $(function () {

        initFileInput("picUpload", "${ctx}" + "/imgUpload");

        initDate();

        $("form").formValidation({
            message: "This value is not valid",

            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },

            fields: {   // 验证

                name: {
                    message: "活动名称验证失败",
                    validators: {
                        notEmpty: {
                            message: "活动名称不能为空"
                        },

                        regexp: {
                            regexp: /([\u4E00-\uFA29]|[\uE7C7-\uE7F3]|[a-zA-Z0-9_]){1,10}$/,
                            message: "校区名称只能包含汉字,英文大小写、数字和下划线"
                        }
                    }
                },
                price: {
                    message: "价格校验失败",
                    validators: {
                        notEmpty: {
                            message: "价格不能为空"
                        },

                        regexp: {
                            regexp: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
                            message: "价格只能为数字，不能以0开头且最多有二位小数"
                        }
                    }
                },


            }
        });
    });


    // fileInput 文件上传
    function initFileInput(ctrlName, uploadUrl) {

        var control = $('#' + ctrlName);
        
        control.fileinput({
            language: 'zh', //设置语言
            uploadUrl: uploadUrl, //上传的地址
            allowedFileExtensions : ['jpg', 'png','gif'],//接收的文件后缀
            showUpload: false, //是否显示上传按钮
            showCaption: false,//是否显示标题
            browseClass: "btn btn-primary", //按钮样式
            uploadAsync: false, //同步上传
            previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
            initialPreviewConfig: [{
                caption: '${pageContext.request.contextPath}/imgupload/small.jpg',
                width: '120px',
                url: '${pageContext.request.contextPath}/deleteBlog.do', // server delete action
                key: 100,
                extra: {id: 100}
            }],
            previewFileIconSettings: {
                'docx': '<i class="fa fa-file-word-o text-primary"></i>',
                'xlsx': '<i class="fa fa-file-excel-o text-success"></i>',
                'pptx': '<i class="fa fa-file-powerpoint-o text-danger"></i>',
                'pdf': '<i class="fa fa-file-pdf-o text-danger"></i>',
                'zip': '<i class="fa fa-file-archive-o text-muted"></i>',
                'sql': '<i class="fa fa-file-word-o text-primary"></i>',
            },

        }).on("fileuploaded", function (e, result) {
            console.log(result);
            var res = result.response;
            var targetURL = res.data.url;
            console.log(targetURL);
            if (res.status > 0) {
                var $picPath = $("#picPath");
                $picPath.prop("value", targetURL);
                console.log($("#picPath").val());
               console.log($picPath.prop("value"));
            } else {
               alert('上传失败');
            }
        }).on("filesuccessremove", function(event, data){
            console.log(event);
            console.log(data);
            console.log("filedeleted");
        }).on("fileremove", function(event, data){
            alert("delete");
            console.log("filedeleted");
        });
    }


    function initDate(){
        var start = {
            elem: "#startDate",
            //elem: startSelector,
            format: "YYYY/MM/DD",
            festival:true, //显示节日
            choose:function(datas){
                end.min = datas; //开始日选好后，重置结束日的最小日期
                end.start = datas //将结束日的初始值设定为开始日
            }
        }

        var end = {
            elem:"#endDate",
            //elem :endSelector,
            format: 'YYYY/MM/DD',
            //min: laydate.now(),
            istime: true,
            istoday: false,
            choose: function(datas){
                start.max = datas; //结束日选好后，重置开始日的最大日期
            }
        }

        laydate(start);
        laydate(end);
    }


</script>

<form id="activityForm" action="${ctx}/activity/save" class="form-horizontal" method="post" enctype="multipart/form-data">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"
                aria-hidden="true">&times;
        </button>
        <h4 class="modal-title" id="myModalLabel1">活动管理</h4>
    </div>
    <div class="modal-body">
        <!--弹出框样式-->

        <!--弹出框样式end-->
        <input type="hidden" name="id" value="${thisActivity.id}">
        <input type="hidden" name="token" value="${token}">

        <div class="form-group">
            <label class="col-sm-2 control-label " for="name">*活动名称：</label>
            <div class="col-sm-10">
                <input type="text" name="name" id="name" value="${thisActivity.name}" class="form-control"
                       placeholder="请输入活动名称">
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label">报名起始日期：</label>
            <div class="col-sm-10">
                <input type="text" id="startDate" name="startDate"
                       value='<fmt:formatDate value="${thisActivity.startDate }" pattern="yyyy/MM/dd" />'
                       class="text form-control " readonly> </input>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label">报名截止日期：</label>
            <div class="col-sm-10">
                <input type="text" id="endDate" name="endDate"
                       value='<fmt:formatDate value="${thisActivity.endDate }" pattern="yyyy/MM/dd" />'
                       class="text form-control" readonly> </input>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label">简介：</label>
            <div class="col-sm-10">
                <input type="text" name="description" class="form-control" value="${thisActivity.description}"
                       placeholder="请输入简介">
            </div>
        </div>


        <div class="form-group">
            <label class="col-sm-2 control-label" for="price">*价格：</label>
            <div class="col-sm-10">
                <input type="text" name="price" id="price" class="form-control" value="${thisActivity.price}"
                       placeholder="请输入价格">
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label">备注：</label>
            <div class="col-sm-10">
                <input type="text" name="note" value="${thisActivity.note}" class="form-control"
                       placeholder="请输入备注">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">图片：</label>
            <div class="col-sm-10">
                <input type="file" id="picUpload"  multiple name="picUpload"  class="form-control" value="">
                <input type="hidden" id="picPath" name="picPath" value="${thisActivity.picPath}" >
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <!--
        <button type="button" class="btn btn-primary " onclick="doSave('activity')">保存</button>
        -->
        <button type="submit" onclick="doSave('activity')" class="btn btn-primary">保存</button>
    </div>
</form>

